<template>
  <div class="content_box">
      
      <div class="nr_box">
        <div class="bj"></div>
        <div class="head_title">
          <div class="box" :style="{height:navBarHeight+'px'}">
            <p :style="{height:statusBarHeight+'px'}"></p>
            <div v-if="role == 'admin'" @click="switchStore" class="title_box" :style="{height:titleBarHeight+'px'}">
              <img class="store" src="/static/images/store.png" alt="">
              <p class="text">{{storeMsg.storeName}}</p>
              <img class="qh" src="/static/images/qh.png" alt="">
            </div>
            <div v-else class="title_box" :style="{height:titleBarHeight+'px'}">
              <img class="store" src="/static/images/store.png" alt="">
              <p class="text">{{storeMsg.storeName}}</p>
            </div>
          </div>
        </div>
        <!-- <div class="notice" v-if="storeMsg.validDay">
          <van-icon size="16px" name="info-o" />
          <p class="text">店铺还有{{storeMsg.validDay}}天到期，请及时续费</p>
          <p class="anniu" @click="toRenew">立即续费</p>
        </div> -->
        <div class="price_box">
          <div class="sx_tab">
            <p @click="lanmuClick(index,item)" :class="index == lanmuIndex?'on':''" v-for="(item,index) in lanmu" :key="index">{{item.name}}</p>
          </div>
          <div class="top">
            <div>
              <p class="title">累计流水(元)<span @click="totalWater">?</span></p>
              <p class="price">
                <!-- <ui-count-up v-if="isTrue" :num="dataMsg.runningWater" width='18' height='28' fontSize='56'></ui-count-up> -->
                <span>{{dataMsg.runningWater != 0?dataMsg.runningWater:'0.00'}}</span>
              </p>
            </div>
            <p class="line"></p>
            <div>
              <p class="title">实际收入(元)<span @click="realityWater">?</span></p>
              <p class="price">
                <!-- <ui-count-up v-if="isTrue" :num="dataMsg.realIncome" width='18' height='28' fontSize='56'></ui-count-up> -->
                <span>{{dataMsg.realIncome != 0?dataMsg.realIncome:'0.00'}}</span>
              </p>
            </div>
          </div>
          <div class="tab_box">
            <div class="box">
              <p class="title">门店预约</p>
              <p class="num">
                <!-- <ui-count-up v-if="isTrue" :num="dataMsg.storeReservation" width='40' height='28' fontSize='32'></ui-count-up> -->
                <span>{{dataMsg.storeReservation != 0?dataMsg.storeReservation:'0.00'}}</span>
              </p>
            </div>
            <div class="box">
              <p class="title">美团团购</p>
              <p class="num">
                <!-- <ui-count-up v-if="isTrue" :num="dataMsg.groupBuy" width='20' height='28' fontSize='32'></ui-count-up> -->
                <span>{{dataMsg.groupBuy != 0?dataMsg.groupBuy:'0.00'}}</span>
              </p>
            </div>
            <div class="box">
              <p class="title">抖音团购</p>
              <p class="num">
                <!-- <ui-count-up v-if="isTrue" num="0" width='10' height='14' fontSize='32'></ui-count-up> -->
                <span>{{dataMsg.dyGroupBuy != 0?dataMsg.dyGroupBuy:'0.00'}}</span>
              </p>
            </div>
            <div class="box">
              <p class="title">用户充值</p>
              <p class="num">
                <!-- <ui-count-up v-if="isTrue" :num="dataMsg.recharge" width='10' height='14' fontSize='32'></ui-count-up> -->
                <span>{{dataMsg.recharge != 0?dataMsg.recharge:'0.00'}}</span>
              </p>
            </div>
            <div class="box">
              <p class="title">线下收款</p>
              <p class="num">
                <!-- <ui-count-up v-if="isTrue" num="0" width='10' height='14' fontSize='32'></ui-count-up> -->
                <span>0.00</span>
              </p>
            </div>
            <div class="box">
              <p class="title">用户退款</p>
              <p class="num">
                <!-- <ui-count-up v-if="isTrue" color="#e4393c" :num="dataMsg.refund" width='20' height='28' fontSize='32'></ui-count-up> -->
                <span class="tk">{{dataMsg.refund != 0?dataMsg.refund:'0.00'}}</span>
              </p>
            </div>
          </div>
        </div>
      </div>
      
      <!-- <div class="store_msg skeleton-rect">
        <div class="left "> -->
          <!-- <img :src="storeMsg.headImg" alt=""> -->
          <!-- <img src="/static/images/my_xsy.png" alt="">
          <div class="msg"> -->
            <!-- <p class="name">{{storeMsg.storeName}}</p> -->
            <!-- <p class="name">杠小二店铺</p>
            <p class="dz">有效期至2022-02-24</p> -->
            <!-- <p class="dz">有效期至{{storeMsg.validTime}}</p> -->
            <!-- <p class="dz">重庆市九龙坡石桥铺1号</p> -->
          <!-- </div>
        </div>
        <div class="kefu skeleton-rect" @click="callPhone">
          <img src="/static/images/lianxikefu_hover.png" alt="">
          <p>专属客服</p>
        </div>
      </div>   -->
      <!--  -->
      <div class="news_box" v-if="newOrderMsg.length">
        <div class="top">
          <p class="name">最新订单</p>
        </div>
        <div v-for="(item,index) in newOrderMsg" :key="index" class="box">
          
          <div class="nr">{{item.latestOrderInfo}}</div>
          <div class="time_box">
            <p class="status">{{item.payType == 0?'微信支付':item.payType == 1?'余额支付':item.payType == 2?'美团验券':item.payType == 3?'抖音验券':'攒星兑换'}}</p>
            <p class="time">{{item.createTime}}</p>
          </div>
        </div>
      </div>
      <div class="new_data" v-else>
        <div class="noData">
          <img src="/static/images/no_data.png" alt="">
          <p>暂无最新订单</p>
        </div>
      </div>
      
      
      <div class="change_store_box">
        <van-popup 
        :show="isStore" 
        position="left"
        @close="closeStore"
        >
          <div class="pop_box">
            <div class="left">
              <p :style="{height:navBarHeight+'px'}"></p>
              <div 
                @click="clickStore(item.id)" 
                :class="item.storeName == storeMsg.storeName?'box on':'box'"
                v-for="(item,index) in storeList" :key="index"
              >
                <div class="img">
                  <img :src="item.headImg" alt="">
                  <p class="gou" v-if="item.storeName == storeMsg.storeName"><van-icon name="success" /></p>
                </div>
                <p class="text">{{item.storeName}}</p>
              </div>
              <div class="add" @click="toAdd"><van-icon name="plus" /></div>
            </div>
          </div>
        </van-popup>
      </div>
  </div>
</template>
 
<script>
import { mapState,mapActions } from 'vuex'
import {
  getStoreBase,
  getStoreCutList,
  selectMyStore,
  getStoreHomePage,
  getLatestOrder,
} from "@/api/index";
export default {
  components: {},
  data() {
    return {
      statusBarHeight: "", // 状态栏高度
      titleBarHeight: "", // 标题栏高度
      navBarHeight: "", // 导航栏总高度
      isStore:false,
      storeMsg:{},
      isTrue:false,
      storeList:[],
      showSkeleton:false,
      bannerIndex:0,
      query:{
        type:0
      },
      dataMsg:{},
      lanmu:[
        {name:'今天',type:0},
        {name:'上周',type:6},
        {name:'本周',type:5},
        {name:'本月',type:3},
        {name:'上月',type:7},
        {name:'全部',type:4}
      ],
      lanmuIndex:0,
      newOrderMsg:{},
    };
  },
  onShow() {
    console.log(this.role)
    this.getStoreMsg()
  },
  onLoad(options) {
    
  },
  computed: {
    ...mapState({
      role: state => state.user.role,
    })
  },
  methods: {
    ...mapActions( ['updateStoreId']),

    // 跳转vip
    toVip(){
      wx.navigateTo({
        url: `/pages/home/vipAdmin/main`,
      });
    },

    // 跳转活动管理
    toHd(){
      wx.navigateTo({
        url: `/pages/home/hdAdmin/main`,
      });
    },

    // 跳转攒星
    toStar(){
      wx.navigateTo({
        url: `/pages/home/starAdmin/main`,
      });
    },

    // 获取最新订单
    getNewOrder(){
      getLatestOrder().then(res=>{
        if(res.statusCode == '00000'){
          this.newOrderMsg = res.data
        }
      })
    },

    // 去完成
    toXuexi(){
      this.$toast('内容正在整理中！')
    },

    // 累计流水问号
    totalWater(){
      console.log("ddd")
      wx.showModal({
        title: '提示',
        content: '累计流水=门店预约+美团团购+抖音团购+用户充值+线下收款',
        confirmText:'我知道了',
        showCancel:false,
         success: (res)=>{
          if (res.confirm) {
          } 
        }
      })
    },

    // 实际收入问号
    realityWater(){
      wx.showModal({
        title: '提示',
        content: '实际收入=(门店预约+美团团购+抖音团购+用户充值+线下收款)-用户退款',
        confirmText:'我知道了',
        showCancel:false,
         success: (res)=>{
          if (res.confirm) {
          } 
        }
      })
    },

    // 好评返现
    toFavorableAdmin(){
      wx.navigateTo({
        url: `/pages/home/favorableAdmin/main`,
      });
    },

    // 跳转负责人管理
    toFzr(){
      wx.navigateTo({
        url: `/pages/home/fzrAdmin/main`,
      });
    },

    // 跳转员工管理
    toAddUser(){
      this.$toast('功能即将开放！')
      return
      wx.navigateTo({
        url: `/pages/home/userAddAdmin/main`,
      });
    },

    // 跳转提现
    toTx(){
      this.$toast('功能即将开放！')
      return
      wx.navigateTo({
        url: `/pages/home/fundAdmin/main`,
      });
    },

    // 跳转捆绑优惠券
    tokbCoupon(){
      wx.navigateTo({
        url: `/pages/home/kbCouponAdmin/main`,
      });
    },

    // 跳转流水
    toLiushui(){
      wx.navigateTo({
        url: `/pages/home/detailedAdmin/main`,
      });
    },

    // 跳转合伙人页面
    toPartner(){
      wx.navigateTo({
        url: `/pages/home/partnerAdmin/main?storeId=${this.storeMsg.id}`,
      });
    },

    // 图片轮播
    changDot(e){
      this.bannerIndex = e.mp.detail.current
    },

    // 专属客服
    callPhone() {
      wx.makePhoneCall({
        phoneNumber: this.storeMsg.contactsPhone //仅为示例，并非真实的电话号码
      })
    },

    // 切换店铺-确认
    clickStore(storeId){
      this.$showLoading("切换中...")
      selectMyStore({storeId}).then(res=>{
        if(res.statusCode == '00000'){
          this.updateStoreId(storeId)
          wx.hideLoading()
          this.isStore = false
          this.$toast('切换成功')
          this.isTrue = false
          this.getStoreMsg()
          this.lanmuIndex = 0
        }else{
          wx.hideLoading()
        }
      })
    },

    // 切换店铺-弹窗
    switchStore(){
      this.isStore = true
      getStoreCutList().then(res=>{
        if(res.statusCode == '00000'){
          this.storeList = res.data
        }
      })
    },

    // 栏目点击
    lanmuClick(index,item){
      this.isTrue = false
      this.query.type = item.type
      this.lanmuIndex = index
      this.getHomeData()
    },

    // 店铺信息
    getStoreMsg(){
      this.$showLoading("加载中...")
      getStoreBase().then(res=>{
        if(res.statusCode == '00000'){
          this.storeMsg = res.data
          wx.hideNavigationBarLoading();
          wx.stopPullDownRefresh();
          /*获取首页统计数据*/
          this.getHomeData()

          /*获取最新订单*/
          this.getNewOrder()
        }else{
          wx.hideNavigationBarLoading();
          wx.stopPullDownRefresh();
          wx.hideLoading()
          this.$toast(res.message)
        }
      })
   
    },
    
    // 获取首页统计数据
    getHomeData(){
      this.$showLoading("加载中...")
      getStoreHomePage(this.query).then(res=>{
        if(res.statusCode == '00000'){
          this.dataMsg = res.data
          this.isTrue = true
          wx.hideLoading()
        }else{
          wx.hideLoading()
          this.$toast(res.message)
        }
      })
    },

    // 跳转统计
    toProfit(){
      wx.navigateTo({
        url: `/pages/home/profit/main`,
      });
    },

    // 跳转订单
    toOrder(){
      wx.navigateTo({
        url: `/pages/home/orderAdmin/main?storeId=${this.storeMsg.id}`,
      });
    },

    // 跳转续费
    toRenew(){
      console.log(this.storeMsg)
      wx.navigateTo({
        url: `/pages/home/renew/main?storeId=${this.storeMsg.id}`,
      });
    },

    // 跳转优惠券
    toCoupon(){
      console.log(this.storeMsg)
      wx.navigateTo({
        url: `/pages/home/couponAdmin/main`,
      });
    },

    // 跳转房间管理
    toRoom(){
      wx.navigateTo({
        url: `/pages/home/roomAdmin/main`,
      });
    },

    // 跳转房间类型
    toType(){
      wx.navigateTo({
        url: `/pages/home/roomTypeAdmin/main`,
      });
    },

    // 跳转房间标签
    toLabel(){
      wx.navigateTo({
        url: `/pages/home/roomLabelAdmin/main`,
      });
    },

    // 跳转充值管理
    toCZ(){
      wx.navigateTo({
        url: `/pages/home/rechargeAdmin/main`,
      });
    },

    // 跳转创建店铺
    toAdd(){
      this.isStore = false
      wx.navigateTo({
        url: `/pages/addStore/main?isEdit=0`,
      });
    },

    // 跳转设备管理
    toSb(){
      wx.navigateTo({
        url: `/pages/home/sbAdmin/main`,
      });
    },
    
    // 选择店铺
    // changeStore(){
    //   this.isStore = true
    // },

    // 关闭弹窗
    closeStore(){
      this.isStore = false
    }

  },
  beforeMount() {
    const self = this;
    wx.getSystemInfo({
      success(system) {
        console.log(`system:`, system);
        self.statusBarHeight = system.statusBarHeight;
        let platformReg = /ios/i;
        if (platformReg.test(system.platform)) {
          self.titleBarHeight = 44;
        } else {
          self.titleBarHeight = 48;
        }
        self.navBarHeight = self.statusBarHeight + self.titleBarHeight;
      },
    });
  },
  onHide() {},
  onUnload() {
  },
  // 下拉刷新
  onPullDownRefresh(){
    //在当前页面显示导航条加载动画
    wx.showNavigationBarLoading();
    this.getStoreMsg()
  },
  onTabItemTap(){
    wx.vibrateShort({type:'heavy'});
  },
  onShareAppMessage() {
    return {
      title: '杠小二商家端',
      path: `/pages/home/main`,
      // imageUrl:'https://yxzw.oss-cn-chengdu.aliyuncs.com/rich/20230116/WXGTafGfYHjvPGQtJABM.png'
    }
 },
};
</script>

<style lang="scss" scoped>
.content_box {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom:1rpx;
  .nr_box{
    position: relative;
  }
  .bj{
    width: 100%;
    height: 500rpx;
    background-image: linear-gradient(to right, #3176FE , #1E6AFF);
    position: absolute;
    top:0;
  }
  .swiper{
    min-height: 370rpx;
  }
  .dots{
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 60;
    p{
      width: 8rpx;
      height: 8rpx;
      background: rgba(0, 0, 0, 0.1);
      margin-left:10rpx;
      &.active{
          width: 20rpx;
          background: #1E6AFF;
      }
    }
  }
  .head_title{
    width: 100%;
    position: relative;
    z-index: 50;
    // position: fixed;
    // top:0;
    // z-index: 100;
    // background-image: linear-gradient(to right, #3176FE , #1E6AFF);
    .title_box{
      display: flex;
      align-items: center;
      margin-left:30rpx;
      font-size:34rpx;
      font-weight: 500;
      width: 80%;
      color:#fff;
      .store{
        width: 42rpx;
        height: 42rpx;
        margin-right:10rpx;
      }
      .qh{
        width: 34rpx;
        height: 34rpx;
        margin-left: 10rpx;
      }
      .text{
        height: 50rpx;
      }
    }
  }
  .notice{
    padding:0 30rpx;
    height: 80rpx;
    line-height: 80rpx;
    background-color: #FFE8E3;
    font-size:28rpx;
    color:#FF4D50;
    display: flex;
    align-items: center;
    margin-top:10rpx;
    position: relative;
    z-index: 50;
    p{
      margin-left:15rpx;
    }
    .anniu{
      margin-left:auto;
      width: 150rpx;
      height: 50rpx;
      background: #FF4D50;
      text-align: center;
      border-radius: 30rpx;
      font-size:26rpx;
      color:#fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 500;
    }
  }
  .price_box{
    margin:0 auto;
    border-radius: 20rpx;
    margin-top:20rpx;
    width: 92%;
    background: #fff;
    position: relative;
    top:0;
    z-index: 50;
    .sx_tab{
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size:28rpx;
      font-weight: 500;
      color:#666;
      padding:30rpx;
      p{
        padding:2rpx 16rpx;
        border-radius: 30rpx;
      }
      .on{
        color:#fff;
        background: #1E6AFF;
        pointer-events:none;
      }
    }
    .top{
      font-size:28rpx;
      display: flex;
      justify-content: space-around;
      align-items: center;
      border-bottom:1px solid #f5f5f5;
      padding:0 30rpx;
      padding-bottom:20rpx;
      margin-top:20rpx;
      div{
        width: 48%;
      }
      .title{
        display: flex;
        align-items: center;
        justify-content: center;
        span{
          display: inline-block;
          width: 30rpx;
          height: 30rpx;
          line-height: 30rpx;
          background: #1E6AFF;
          color:#fff;
          font-size:24rpx;
          text-align: center;
          border-radius: 50%;
          margin-left:10rpx;
        }
      }
      .line{
        width: 1px;
        height: 100rpx;
        background: #f5f5f5;
      }
      .price{
        font-size:56rpx;
        margin:14rpx 0 0rpx 0;
        font-weight: 500;
        height: 70rpx;
        overflow: hidden;
        text-align: center;
        /deep/ .number-box{
          justify-content: center;
          align-items: center;
        }
        span{
          position: relative;
        }
      }
    }
    .tab_box{
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      font-size:28rpx;
      padding-bottom:30rpx;
      .box{
        text-align: center;
        margin-top:30rpx;
        width: 33%;
        &:nth-child(3n){
          margin-right:0;
        }
      }
      .num{
        margin-top:6rpx;
        display: flex;
        align-items: baseline;
        height: 50rpx;
        overflow: hidden;
        text-align: center;
        justify-content: center;
        /deep/ .number-box{
          justify-content: center;
          align-items: center;
        }
        span{
          font-size:32rpx;
          font-weight: 500;
          &.tk{
            color:#e4393c;
          }
        }
      }
    }
  }
  .news_box{
    width: 92%;
    background: #fff;
    border-radius: 20rpx;
    margin:30rpx auto;
    
    .top{
      margin:0 30rpx;
      height: 80rpx;
      border-bottom:1px solid #f5f5f5;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .name{
        color:#666;
        font-size:28rpx;
      }
      .price{
        color:#1E6AFF;
        font-size:34rpx;
        font-weight: 500;
      }
    }
    .box{
      border-bottom: 2rpx solid #f5f5f5;
    }
    .nr{
      padding:30rpx;
      font-size:30rpx;
      color:#333;
      line-height: 46rpx;
    }
    .time_box{
      display: flex;
      padding:30rpx;
      justify-content: space-between;
      align-items: center;
      padding-top:0;
      .status{
        font-size:30rpx;
        font-weight: 500;
      }
      .time{
        font-size:28rpx;
        color:#999;
      }
    }
  }
  .store_msg{
    box-shadow: 0 0rpx 20rpx 10rpx #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:30rpx;
    border-radius: 20rpx;
    background: #fff;
    width: 84%;
    margin:0 auto;
    margin-top:30rpx;
    .left{
      display: flex;
    }
    img{
      width: 100rpx;
      height: 100rpx;
      border-radius: 15rpx;
      margin-right:30rpx;
    }
    .msg{
      display: flex;
      flex-direction:column;
      justify-content: space-around;
      .name{
        font-size:32rpx;
        font-weight: 500;
        color:#222;
      }
      .dz{
        color:#666;
        font-size:24rpx;
      }
    }
    .kefu{
      border-left:1px solid #f5f5f5;
      text-align: center;
      padding-left:30rpx;
      font-size:26rpx;
      color:#222;
      img{
        width: 60rpx;
        height: 60rpx;
        margin-right:0;
      }
    }
  }
  .lanmu_box{
    background: #fff;
    width: 92%;
    margin:30rpx auto 0 auto;
    border-radius: 20rpx;
    padding-bottom:30rpx;
    .line_box{
      display: flex;
      align-items: center;
      padding:30rpx;
      padding-bottom:0;
      .line{
        width: 6rpx;
        height: 30rpx;
        background: #1E6AFF;
      }
      .text{
        font-size:30rpx;
        font-weight: 500;
        margin-left:10rpx;
      }
    }
  }
  .admin_list_box{
    .box{
      width: 33%;
      margin-top:50rpx;
      font-size:28rpx;
      font-size:#333;
      display: inline-block;
      text-align: center;
    }
    img{
      width: 60rpx;
      height: 60rpx;
      margin-bottom:10rpx;
    }
  }
  .xuexi_box{
    margin:30rpx;
    background: #fff;
    border-radius: 20rpx;
    padding:30rpx;
    padding-bottom:1rpx;
    .title_box{
      display: flex;
      align-items: center;
      margin:0rpx 0 50rpx 0;
      .line{
        width: 6rpx;
        height: 30rpx;
        background: #1E6AFF;
      }
      .text{
        font-size:30rpx;
        font-weight: 500;
        margin-left:10rpx;
      }
    }
    .box{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom:50rpx;
      .left{
        display: flex;
        align-items: center;
        img{
          width: 90rpx;
          height: 90rpx;
          margin-right:20rpx;
        }
        .name{
          font-size:30rpx;
        }
        .text{
          color:#999;
          font-size:26rpx;
          margin-top:10rpx;
        }
      }
      .anniu{
        width: 150rpx;
        height: 56rpx;
        line-height: 56rpx;
        border:1px solid #1E6AFF;
        color:#1E6AFF;
        text-align: center;
        font-size:26rpx;
        border-radius: 50rpx;
      }
    }
    .bottom_text{
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-bottom:30rpx;
      font-size:24rpx;
      color:#999;
      span{
        display: inline-block;
        width: 20rpx;
        height: 1px;
        background: #999;
        margin:0 20rpx;
      }
    }
  }
  .change_store_box{
    position: relative;
    /deep/ .van-popup{
      height: 100vh;
    }
    .pop_box{
      display: flex;
      .left{
        width: 200rpx;
        min-height: 100vh;
        background: #F9FAFE;
        text-align: center;
        .box{
          margin:0 auto;
          text-align: center;
          margin-bottom:50rpx;
          .img{
            width: 100rpx;
            height: 100rpx;
            border-radius: 50%;
            border:2px solid transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            margin:0 auto;
            background:#fff;
            img{
              width: 88rpx;
              height: 88rpx;
              border-radius: 50%;
            }
            .gou{
              width: 30rpx;
              height: 30rpx;
              background: #1E6AFF;
              border-radius: 50%;
              color:#fff;
              font-size:22rpx;
              position: absolute;
              bottom:0;
              right:0;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }
          .text{
            font-size:26rpx;
            color:#25252E;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 80%;
            margin:20rpx auto 0 auto;
          }
          &.on{
            .img{
              border-color:#1E6AFF;
            }
          }
        }
        .add{
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
          background: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          margin:0 auto;
          font-size:50rpx;
          color:#1E6AFF;
        }
      }
      .right{
        flex: 1;
        padding:0 30rpx;
        position: relative;
        .msg{
          .name_box{
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .name{
              display: flex;
              justify-content: space-between;
              align-items: center;
              font-weight: 500;
              font-size:34rpx;
              img{
                width: 46rpx;
                height: 46rpx;
                border-radius: 50%;
                margin-right:10rpx;
              }
            }
            .icon{
              color:#666;
              font-size:28rpx;
            }
          }
          .tell{
            color:#666;
            font-size:26rpx;
            margin:10rpx 0 20rpx 0;
          }
          .anniu{
            display: inline-block;
            padding:4rpx 10rpx;
            background: #1E6AFF;
            color:#fff;
            font-size:28rpx;
            border-radius: 6rpx;
          }
        }
        .list_box{
          margin-top:100rpx;
          .box{
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size:30rpx;
            color:#222;
            border-bottom:1px solid #f5f5f5;
            height: 90rpx;
            .icon{
              color:#666;
            }
          }
        }
        .outLogin{
          position: absolute;
          bottom:100rpx;
          width: 86%;
          text-align: center;
          font-size:30rpx;
          color:#FF4D50;
        }
      }
    }
    // .box{
    //   width: 400rpx;
    //   // display: flex;
    //   // justify-content: space-between;
    //   // flex-wrap:wrap;
    //   .list{
    //     width: 300rpx;
    //     height: 80rpx;
    //     line-height: 80rpx;
    //     border:1px solid #ccc;
    //     border-radius: 8rpx;
    //     text-align: center;
    //     margin:0 auto;
    //     margin-bottom:40rpx;
    //     font-size:30rpx;
    //     color:#222;
    //     font-weight: 500;
    //     &.on{
    //       border-color:red;
    //       color:red;
    //     }
    //   }
    // }
    // .add{
    //   width: 100%;
    //   position: absolute;
    //   bottom:50rpx;
    //   p{
    //     height: 80rpx;
    //     border:1px solid #3176FE;
    //     margin:0 30rpx;
    //     display: flex;
    //     align-items: center;
    //     justify-content: center;
    //     font-size:30rpx;
    //     border-radius: 6rpx;
    //     color:#3176FE;
    //   }
    // }
  }
}
.noData{
  color: #8e9398;
  font-size: 24rpx;
  margin-bottom: 80rpx;
  text-align: center;
  padding-top: 80rpx;
  height: 120rpx;
  img{
    width: 240rpx;
    height: 240rpx;
  }
}
</style>
